
/**
 * 1.需求: canvas背景
 */

//调用
CanvasParticle({
  vx: 4,	//小球x轴速度,正为右，负为左
  vy: 4,	//小球y轴速度
  height: 2,	//小球高宽，其实为正方形，所以不宜太大
  width: 2,
  count: 200,		//点个数
  color: "#84efc", 	//点颜色
  stroke: "#4721c", 		//线条颜色
  dist: 6000, 	//点吸附距离
  e_dist: 20000, 	//鼠标吸附加速距离
  max_conn: 10 	//点到点最大连接数
});
/**
 * 需求:鼠标点击菜单
 *      切换选择的次数
 */
 let data = [
  { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
  { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
  { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]

//遍历data,组装成HTML代码,渲染到price-ul中
 
let priceUl = document.querySelector('.price-ul')
let priceAll = document.querySelector('.priceAll')
let unitPrice = document.querySelector('.unitPrice')

function renderData() {
  //保存组装好的HTML代码
  let dataHtml = '';

  data.forEach(function (v, i) {
    //组装数据
    dataHtml += `
    <li class="${i === 0 ? 'active' : ''}" data-price="${v.price}"  data-unit-price="${v.unitPrice}"  >${v.count}次</li>
  `
  })

  //渲染
  priceUl.innerHTML += dataHtml;
}

renderData();

//点击priceUl,

priceUl.addEventListener('click', function (e) {

 //筛选出li
 let bool = e.target.nodeName === 'LI' && e.target.className != 'record';

 //判断
 if (bool) {

   //先清除掉所有li的类名active
   for (let i = 1; i < priceUl.children.length; i++) {
     priceUl.children[i].className = ''
   };

   //给当前事件源添加激活样式(active)
   e.target.className = 'active'


   //设置价格
   priceAll.textContent = e.target.dataset.price;

   //设置单价
   unitPrice.textContent = e.target.dataset.unitPrice;

 }

})

/**
 * 需求:鼠标点击菜单
 *      为当前菜单添加激活样式
 *      显示当前菜单对应的内容
 */
 let menu = document.querySelectorAll('.tabtop li')
 let content = document.querySelectorAll('.tabcon>.tabcon-item')

 
 //定义变量保存上一个菜单的索引
 let index = 0;
 
 menu.forEach(function (v, i) {
     v.addEventListener('click', function () {
         //清除上一个菜单的激活样式
         menu[index].classList.remove('active')
 
         //给当前菜单添加激活样式
         this.classList.add('active')
 
         //清除上一个菜单的激活样式
         content[index].classList.remove('current')
         //显示当前菜单对应的内容
         content[i].classList.add('current')
 
         //将单签索引赋值给index
         index = i
     })
 })



